<template>
  <index>
    <div class="login-page login-register-page" v-if="active == 0">
      <div class="login-left">
        <div class="login-left-tab">快速匹配，安全省心有保障</div>
        <el-input placeholder="请输入手机号" class="theme-input" v-model="params.phone">
          <img slot="prefix" src="../../assets/img/register/phone.png" height="34px">
        </el-input>

        <div class="identify">
          <el-col :span="13">
            <el-input placeholder="图形验证码" class="theme-input input-img-canvas" v-model="imgCode">
              <img slot="prefix" src="../../assets/img/register/anquan.png" height="30px">
            </el-input>
          </el-col>
          <el-col :span="7">
            <s-identify :identifyCode="identifyCode"></s-identify>
          </el-col>
          <el-col :span="4" class="login-canvas-button">
            <el-button type="text" @click="refreshCode">
              看不清
              <br>换一张
            </el-button>
          </el-col>
        </div>

        <el-input placeholder="请输入短信验证码" class="theme-input" v-model="params.code">
          <img slot="prefix" src="../../assets/img/register/123.png" height="30px">
          <el-button
            slot="suffix"
            type="text"
            class="login-left-text-blue"
            @click="sendCode"
            :disabled="codeLeftTime!=60">
            发送验证码
            <span v-if="codeLeftTime!=60">({{codeLeftTime}})</span>
          </el-button>
        </el-input>
        <el-input placeholder="设置密码" show-password class="theme-input" show-password v-model="params.password">
          <img slot="prefix" src="../../assets/img/register/lock.png" height="29px">
        </el-input>
        <el-input placeholder="确认密码" show-password class="theme-input" show-password v-model="params.confirmPassword">
          <img slot="prefix" src="../../assets/img/register/lock1.png" height="29px">
        </el-input>
        <el-button class="theme-button login-button" @click="doSecond">下一步</el-button>
      </div>
      <div class="login-right">
        <right-image text="已有账号，" button="立即登录"></right-image>
      </div>
    </div>
    <div class="login-page login-register-page" v-if="active == 1">
      <div class="login-left">
        <div class="login-left-tab" style="margin:0 0 100px 0;">快速匹配，安全省心有保障</div>
        <el-input placeholder="请输入企业全称" class="theme-input" v-model="params.company">
          <img slot="prefix" src="../../assets/img/register/lou.png" height="28px">
        </el-input>

        <el-input placeholder="请输入联系人姓名" class="theme-input" v-model="params.name">
          <img slot="prefix" src="../../assets/img/register/geren.png" height="32px">
        </el-input>
        <el-button class="theme-button login-button" style="margin:40px 0 0 0;" @click="doSubmit">注册</el-button>
        <el-row class="register-agreement">
          注册代表您已同意
          <span style="color:#f15c18;cursor:pointer;" @click="lookAgreement">《注册工程师人才网企业协议》</span>
        </el-row>
      </div>
      <div class="login-right">
        <right-image text="已有账号，" button="立即登录"></right-image>
      </div>
      <el-dialog class="register-dialog" :visible.sync="dialogVisible" title="注册工程师人才网企业协议">
        <div class="register-dialog-content" v-html="agreement"></div>
      </el-dialog>
    </div>
  </index>
</template>

<script>
import Index from './index'
import rightImage from './right-image'
import SIdentify from './picVerfication'
import validate from '../../assets/utils/validate.js'
import _g from '../../assets/utils/global'
import _subject from '../../assets/utils/subject'
export default {
  data() {
    return {
      active: 0, //注册时的页面
      params: {
        //传入后台数据
        phone: '', //电话号
        code: '', //短信验证码
        password: '', //密码
        confirmPassword: '', //确认密码
        company: '', //企业全称
        name: '' //联系人姓名
      },
      imgCode: '',
      identifyCode: '',
      identifyCodes: '1234567890',
      codeLeftTime: 60, //获取验证码间隔
      dialogVisible:false,
      agreement:'',
    }
  },
  methods: {
    setUserInfo(info) {
      //设置用户信息到localStorage中
      localStorage.setItem(localSaved.userInfo, JSON.stringify(info))
      _subject.register()
      setTimeout(() => {
        this.$router.push({ path: '/index' }, 600)
      })
    },
    sendCodeCheck(){
      if (this.params.phone == ''){
        _g.message('手机号不能为空', 'warning')
        return false
      }
      if (!validate.isPhone(this.params.phone)) {
        _g.message('请输入正确手机号', 'warning')
        return false
      }
      if (this.imgCode=='') {
        console.log(this.imgCode+"======>>>>>>>>")
        _g.message('图形验证码不能为空', 'warning')
        return false
      }
      if (this.identifyCode != this.imgCode) {
        _g.message('图形验证码不正确', 'warning')
        return false
      }
      return true;
    },
    check(){
      if(!this.sendCodeCheck()){
        return false
      }
      if (this.params.code == '') {
        _g.message('短信验证码不能为空', 'warning')
        return false
      }
      if (this.params.password == '') {
        _g.message('密码不能为空', 'warning')
        return false
      }
      if (this.params.password != this.params.confirmPassword) {
        _g.message('两次密码输入不一样', 'warning')
        return false
      }
      if (this.active == 1 && this.params.company == '') {
        _g.message('企业全称不能为空', 'warning')
        return false
      }
      if (this.active == 1 && this.params.name == '') {
        _g.message('联系人姓名不能为空', 'warning')
        return false
      }
      return true
    },
    init() {
      let left_time = localStorage.getItem(localSaved.registerTime)
      if (left_time > 0 && left_time != 60) {
        this.codeLeftTime = left_time
        clearInterval(this.settime)
        this.setCodeTime()
      }
    },
    sendCode() {
      //点击发送验证码
      let that = this;
      if (this.sendCodeCheck()) {
        _g.apiPost('/company/validatePhone.do', { phone: this.params.phone })
          .then(res => {
            if (res && res.status === 0) {
              _g.apiPost('/company/getSMS.do', { phone: this.params.phone }).then(res => {
                _g.toMessage({
                  status: res.status,
                  msg: res.status == 0 ? '已发送' : '发送失败'
                })
                if (res.status == 0) {
                  that.setCodeTime()
                }
              })
            } else {
              _g.toMessage(res)
            }
          })
      }
    },
    /**
     * @name 设置验证码延时
     */
    setCodeTime() {
      this.settime = setInterval(() => {
        this.codeLeftTime--
        localStorage.setItem(localSaved.registerTime, this.codeLeftTime)
        if (this.codeLeftTime == 0) {
          clearInterval(this.settime)
          this.codeLeftTime = 60
          localStorage.setItem(localSaved.registerTime, this.codeLeftTime)
        }
      }, 1000)
    },
    doSecond() {
      //验证并跳转到第二个页面
      if(this.check()){
        //console.log(this.params.code)
        _g.apiPost('/company/validateYards.do',{ phone: this.params.phone ,yards:this.params.code}).then(res =>{
          _g.toMessage(res)
          if(res.status==0){
            this.active = 1;
          }
        })
      }
    },
    doSubmit() {
      //提交信息,注册
      let that = this;
      if(this.check()){
        //console.log(this.params.code)
        _g.apiPost('/company/register.do',{
          contactName:that.params.name,
          fullName:that.params.company,
          phone: that.params.phone,
          password: that.params.password
        }).then(res =>{
          _g.toMessage(res)
          if(res.status==0){
            let params = {
              phone: this.params.phone,
              password: this.params.password
            }
            _g.apiPost('/company/login.do', params).then(res => {
              _g.toMessage(res)
              if (res.status == 0) {
                this.setUserInfo(res.data)
              }
            })
            // setTimeout(() => {
            //   this.$router.push({ path: '/login' }, 600)
            // })
          }
        })
      }

    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
      // console.log(this.identifyCode)
    },
    lookAgreement(){
      this.dialogVisible = true;
      _g.apiPost('/login/getAgreement.do', {state:2}).then(res => {
        this.agreement = res.data
      })
    }
  },
  created() {
    this.makeCode()
    this.init()
  },
  mounted() {
    // 验证码初始化
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  components: {
    Index,
    rightImage,
    SIdentify
  }
}
</script>

<style lang="scss">
.input-img-canvas {
  width: 180px !important;
  height: 55px !important;
  input {
    width: 100%;
    height: 100%;
  }
}
.identify {
  margin: 8px 0 8px 0;
  width: 360px;
  height: 55px;
  display: flex;
  align-items: center;
}
.register-agreement {
  margin: 10px 0 0 0;
  font-size: 16px;
  color: #999;
  font-weight: 400;
  span {
    color: #f15c18;
  }
}
.register-dialog {
  .el-dialog {
    width: 980px !important;
    height: 700px;
    margin-top: 3vh !important;

    .register-dialog-content {
      height: 600px;
      overflow: auto;
    }
  }

}
</style>
